<template>
  <div class="container">
    <map-box ref="mapBoxRef" @marker-clicked="handleMarkerClick"></map-box>
    <div class="topLine">
      <div class="left">
        <router-link to="/explore">RETURN</router-link>
        <div class="navigator">
          <img src="@/assets/images/navigator.png" alt="" />
        </div>
      </div>
      <div class="center">杨鹏程/YANG PENGCHENG</div>
      <div class="RIGHT">THE PLANTS AROUND ME</div>
    </div>
    <div class="mask" @click="closeWindow" :class="{ show: showWindow }"></div>
    <div class="popWindow" :class="{ show: showWindow, left: isLeft, right: !isLeft }">
      <div class="window">

        <!-- <img src="@/assets/images/windowLeft1.png" alt="" v-if="imgIndex == 0" />
        <img src="@/assets/images/window.png" alt="" v-else /> -->

        <img v-if="imgIndex == 0" :src="'https://ossdemo.ajioang.cn/' + mapindex + 'a.png'" alt="" />
        <img v-else :src="'https://ossdemo.ajioang.cn/' + mapindex + 'b.png'" alt="" />

        <!-- mapindex 等于7的时候 只有一个采访 -->
        {{ mapindex }}
        <div class="yinpin" v-if="mapindex == 7 && imgIndex == 0">

          <!-- 下面是绣球播放的音频 -->
          <div class="xiuqiu" @click="changeAndPlay(1)">

            <!-- 当绣球停止播放的时候显示暂停图标 -->
            <img class="svgs" v-if="idbofang" src="../../assets/images/jing.png" />
            <!-- 当绣球播放音频的时候显示播放图标 -->
            <img class="svgs" v-else src="../../assets/images/sheng.png" />
          </div>
        </div>

        <!-- mapindex 等于8的时候 全部都是采访的 -->
        <div class="yinpin" v-if="mapindex == 7 && imgIndex != 0" style="bottom: 40px;">
          <!-- 下面是采访播放的音频 -->
          <div class="caifang" @click="caifang(index + 1)" v-for="(item, index) in 5" style="width: 40px">
            <!-- 当绣球停止播放的时候显示暂停图标 -->
            <img class="svgs" v-if="currentPlayingId === index + 1" src="../../assets/images/jing.png" />
            <!-- 当绣球播放音频的时候显示播放图标 -->
            <img class="svgs" v-else src="../../assets/images/sheng.png" />
          </div>
          <div style="clear: both;font-size: 15px;color: white;text-align: right;padding-top: 10px;">相关采访</div>
          <!-- <div class="caifang" @click="caifang(2)">
            现场采访2
          </div>
          <div class="caifang" @click="caifang(3)">
            现场采访3
          </div>
          <div class="caifang" @click="caifang(4)">
            现场采访4
          </div>
          <div class="caifang" @click="caifang(5)">
            现场采访5
          </div> -->
        </div>
        <div class="yinpin" v-if="mapindex == 8">

          <!-- 下面是绣球播放的音频 -->
          <div class="xiuqiu" @click="changeAndPlay()">

            <!-- 当绣球停止播放的时候显示暂停图标 -->
            <img class="svgs" v-if="idbofang" src="../../assets/images/jing.png" />
            <!-- 当绣球播放音频的时候显示播放图标 -->
            <img class="svgs" v-else src="../../assets/images/sheng.png" />
          </div>
        </div>
        <!-- <div class="yinpin" v-if="mapindex == 8 && imgIndex != 0">

          下面是绣球播放的音频
          <div class="xiuqiu" @click="changeAndPlay(2)">

            当绣球播放音频的时候显示播放图标
            <img class="svgs" v-if="isPlayingXiuqiu" src="../../assets/images/sheng.png" />

            当绣球停止播放的时候显示暂停图标
            <img class="svgs" v-else src="../../assets/images/jing.png" />
          </div>
        </div> -->
        <div class="tabs">
          <div class="tab" @click="changes(0)"></div>
          <div class="tab" @click="changes(1)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MapBox from "@/components/mapBox/left.vue";

export default {
  components: {
    'map-box': MapBox
  },
  data() {
    return {
      showWindow: null,
      isLeft: null,
      idbofang: false,
      imgIndex: 0,
      audioUrl: '',
      newAudioUrl: '',
      nowval: "",//正在播放的是1 还是1s
      nowindex: "", //正在播放得是哪块地图经纬度得
      audioPlayer: null,
      currentPlayingId: null,
      markerData: {
        indexs: ""
      },
      mapindexs: "",
    }
  },
  methods: {
    changes(val) {
      this.imgIndex = val
      this.audioPlayer.pause();
      this.audioPlayer = null;
      this.isPlayingXiuqiu = false;
      this.idbofang = false
    },
    caifang(val) {
      // If clicking the same interview that's already playing, toggle pause
      if (this.currentPlayingId === val && this.audioPlayer && !this.audioPlayer.paused) {
        this.audioPlayer.pause();
        this.currentPlayingId = null;
        return;
      }

      // Stop any currently playing audio
      if (this.audioPlayer) {
        this.audioPlayer.pause();
        this.audioPlayer = null;
      }

      // Set new audio URL for the interview
      this.newAudioUrl = "https://ossdemo.ajioang.cn/" + this.mapindex + 'b' + val + '.mp3';
      console.log('Playing interview audio:', this.newAudioUrl);

      // Update playback state
      this.currentPlayingId = val;
      this.nowval = val;
      this.nowindex = this.mapindex;

      // Create and play the new audio
      this.audioPlayer = new Audio(this.newAudioUrl);
      this.audioPlayer.play().catch(error => {
        console.error('Interview playback failed:', error);
        this.currentPlayingId = null;
      });

      // Handle when audio ends naturally
      this.audioPlayer.addEventListener('ended', () => {
        this.currentPlayingId = null;
      });
    },
    changeAndPlay() {
      let val
      if (this.imgIndex == 0) {
        val = 1
      } else {
        val = 2
      }
      // Stop any currently playing audio first
      if (this.audioPlayer) {
        this.audioPlayer.pause();
        this.audioPlayer = null;
      }

      // If clicking the same audio that was playing, just stop it
      if (this.nowindex === this.mapindex && this.nowval === val) {
        this.nowval = '';
        this.nowindex = '';
        this.idbofang = false;
        return;
      }

      // Set new audio to play
      this.nowval = val;
      this.nowindex = this.mapindex;
      this.idbofang = true; // Always set to true when starting playback

      if (this.mapindex == 8 && val == 1) {
        this.newAudioUrl = "https://ossdemo.ajioang.cn/" + this.mapindex + (val == 1 ? '' : 's') + '.wav';
      } else if (this.mapindex == 8 && val != 1) {
        this.newAudioUrl = "https://ossdemo.ajioang.cn/" + this.mapindex + (val == 1 ? '' : 's') + '.mp3';
      } else if (this.mapindex == 7) {
        this.newAudioUrl = "https://ossdemo.ajioang.cn/" + this.mapindex + (val == 1 ? 'a' : 's') + '.mp3';
      }

      console.log('Playing audio:', this.newAudioUrl);

      this.audioPlayer = new Audio(this.newAudioUrl);
      this.audioPlayer.play().catch(error => {
        console.error('Playback failed:', error);
        this.idbofang = false;
      });

      this.audioPlayer.addEventListener('ended', () => {
        this.idbofang = false;
      });
    },
    bofang() {
      this.audioUrl = this.newAudioUrl;

      if (this.audioPlayer) {
        this.audioPlayer.pause();
        this.audioPlayer = null;
      }

      this.audioPlayer = new Audio(this.audioUrl);
      this.audioPlayer.play().catch(error => {
        console.error('播放失败:', error);
        this.isPlayingXiuqiu = false;
      });

      // 监听音频结束事件
      this.audioPlayer.addEventListener('ended', () => {
        this.isPlayingXiuqiu = false;
      });
    },
    handleMarkerClick(markerData) {
      this.idbofang = false
      console.log(markerData.id)
      if (markerData.id == 'marker_1751206154549') {
        this.mapindex = 7
      } else {
        this.mapindex = 8
      }
      console.log("收到子组件的marker点击事件:", markerData);
      this.markerData = markerData;
      this.isLeft = markerData.lng > 0 ? false : true;
      this.showWindow = true;
      this.imgIndex = 0;
    },

    closeWindow() {
      this.showWindow = false;
      if (this.audioPlayer) {
        this.audioPlayer.pause();
        this.audioPlayer = null;
      }
    }
  }
}
</script>

<style lang="less" scoped>
.svgs {
  width: 30px;
  float: right
}

.yinpin {
  position: absolute;
  bottom: 114px;
  right: 70px;
}

.caifang {
  width: 64px;
  height: 30px;
  float: right;
  font-size: 12px;
  color: white;
  // background: red;
}

.container {
  display: flex;
  justify-content: center;
  background: #080913;
  position: relative;
  height: 100vh;
  width: 100vw;
  align-items: center;
  overflow: hidden;
}

.topLine {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 3vh 6vw 1vh 6vw;
  font-size: 1vw;
  z-index: 999;
  background: #080913;

  .left {
    position: relative;

    a {
      color: #fff;
    }

    .navigator {
      position: absolute;
      left: 50%;
      top: 5vh;
      width: 4.5vw;
      transform: translateX(-50%);

      img {
        max-width: 100%;
      }
    }
  }
}

.mask {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(8, 9, 19, 0.4);
  backdrop-filter: blur(2px);
  z-index: 999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;

  &.show {
    visibility: visible;
    opacity: 1;
  }
}

.popWindow {
  width: 100vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: all 0.3s;
  pointer-events: none;

  .window {
    position: absolute;
    pointer-events: all;
    width: 700px;
    left: 0;
    top: 0;
    z-index: 999;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
    font-size: 0;
    left: 50%;
    transform: translateX(calc(-50% - 600px)) translateY(-50%);
    top: 50%;

    img {
      max-width: 100%;
    }
  }

  &.show {
    visibility: visible;
    opacity: 1;
  }

  &.right {
    transform: translateX(calc(50%));
  }
}

.tabs {
  display: flex;
  width: 100%;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  gap: 10px;

  .tab {
    flex-grow: 1;
    cursor: pointer;
  }
}
</style>